<input type="file">

Das value-Attribut eines Datei-Inputs enthält eine Zeichenkette, die den Pfad zur ausgewählten Datei(en) darstellt. Wenn noch keine Datei ausgewählt ist, ist der Wert eine leere Zeichenkette (""). Wenn der Benutzer mehrere Dateien ausgewählt hat, repräsentiert der value die erste Datei in der Liste der ausgewählten Dateien. Die anderen Dateien können über die HTMLInputElement.files-Eigenschaft des Inputs identifiziert werden.

Neben den allgemeinen Attributen, die von allen <input>-Elementen geteilt werden, unterstützen Inputs vom Typ file auch die folgenden Attribute.

Der Wert des accept-Attributs ist eine Zeichenkette, die die Dateitypen definiert, die der Datei-Input akzeptieren soll. Diese Zeichenkette ist eine durch Kommas getrennte Liste von eindeutigen Dateityp-Spezifikatoren. Da ein gegebener Dateityp auf mehr als eine Weise identifiziert werden kann, ist es nützlich, eine umfassende Menge von Typ-Spezifikatoren bereitzustellen, wenn Sie Dateien eines bestimmten Formats benötigen.

Zum Beispiel gibt es eine Reihe von Möglichkeiten, Microsoft Word-Dateien zu identifizieren, daher könnte eine Webseite, die Word-Dateien akzeptiert, ein <input> wie dieses verwenden:

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Der Wert des capture-Attributs ist eine Zeichenkette, die angibt, welche Kamera für die Erfassung von Bild- oder Videodaten verwendet werden soll, wenn das accept-Attribut angibt, dass der Input einer dieser Typen sein soll. Ein Wert von user gibt an, dass die nach innen gerichtete Kamera und/oder das Mikrofon verwendet werden soll. Ein Wert von environment gibt an, dass die nach außen gerichtete Kamera und/oder das Mikrofon verwendet werden soll. Wenn dieses Attribut fehlt, liegt es im Ermessen des User Agents, was zu tun ist. Wenn der angeforderte Aufnahmemodus nicht verfügbar ist, kann der User Agent auf seinen bevorzugten Standardmodus zurückgreifen.

Wenn das multiple-Boolean-Attribut angegeben ist, erlaubt der Datei-Input dem Benutzer, mehr als eine Datei auszuwählen.

Zusätzlich zu den oben aufgelisteten Attributen sind in einigen Browsern die folgenden nicht standardisierten Attribute verfügbar. Diese sollten nach Möglichkeit vermieden werden, da sie die Fähigkeit Ihres Codes einschränken, in Browsern zu funktionieren, die sie nicht implementieren.

Das Boolean-Attribut webkitdirectory, falls vorhanden, zeigt an, dass nur Verzeichnisse von der Benutzeroberfläche des Datei-Auswahl Dialogs ausgewählt werden dürfen. Weitere Details und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Obwohl ursprünglich nur für WebKit-basierte Browser entwickelt, ist webkitdirectory auch in Firefox verwendbar. Trotz ihrer relativ breiten Unterstützung ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, es gibt keine Alternative.

Ein eindeutiger Dateityp-Spezifikator ist eine Zeichenkette, die einen Dateityp beschreibt, der vom Benutzer in einem <input>-Element vom Typ file ausgewählt werden kann. Jeder eindeutige Dateityp-Spezifikator kann eine der folgenden Formen annehmen:

• Eine gültige, nicht groß- und kleinschreibungssensitive Dateinamenserweiterung, die mit einem Punkt (".") beginnt. Beispielsweise: .jpg, .pdf oder .doc.
• Eine gültige MIME-Typ-Zeichenkette, ohne Erweiterungen.
• Die Zeichenkette audio/*, was "jede Audiodatei" bedeutet.
• Die Zeichenkette video/*, was "jede Videodatei" bedeutet.
• Die Zeichenkette image/*, was "jede Bilddatei" bedeutet.

Das accept-Attribut nimmt als Wert eine Zeichenkette, die einen oder mehrere dieser eindeutigen Dateityp-Spezifikatoren enthält, getrennt durch Kommas. Beispielsweise könnte ein Datei-Auswahl-Dialog, der Inhalte benötigt, die als Bild dargestellt werden können, einschließlich sowohl Standard-Bildformaten als auch PDF-Dateien, so aussehen:

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies ergibt die folgende Ausgabe:

Unabhängig vom Gerät oder Betriebssystem des Benutzers bietet der Datei-Input eine Schaltfläche, die einen Datei-Auswahl-Dialog öffnet und es dem Benutzer erlaubt, eine Datei auszuwählen.

Die Angabe des multiple-Attributs, wie oben gezeigt, gibt an, dass mehrere Dateien auf einmal ausgewählt werden können. Der Benutzer kann mehrere Dateien aus dem Datei-Auswahl-Dialog auf jede Weise auswählen, die seine gewählte Plattform zulässt (z.B. durch gleichzeitiges Drücken von Shift oder Control und anschließendem Klicken). Wenn Sie nur möchten, dass der Benutzer eine einzelne Datei pro <input> auswählt, lassen Sie das multiple-Attribut weg.

Die ausgewählten Dateien werden durch die HTMLInputElement.files-Eigenschaft des Elements zurückgegeben, die ein FileList-Objekt enthält, das eine Liste von File-Objekten enthält. Die FileList verhält sich wie ein Array, sodass Sie ihre length-Eigenschaft überprüfen können, um die Anzahl der ausgewählten Dateien zu ermitteln.

Jedes File-Objekt enthält die folgenden Informationen:

name

Der Name der Datei.

lastModified

Eine Zahl, die das Datum und die Uhrzeit angibt, zu der die Datei zuletzt geändert wurde, in Millisekunden seit der UNIX-Epoche (1. Januar 1970, Mitternacht).

lastModifiedDate Veraltet

Ein Date-Objekt, das das Datum und die Uhrzeit darstellt, zu der die Datei zuletzt geändert wurde. Dies ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen lastModified.

size

Die Größe der Datei in Bytes.

type

Der MIME-Typ der Datei.

webkitRelativePath Nicht standardisiert

Eine Zeichenkette, die den relativen Pfad der Datei zum Basisverzeichnis angibt, das in einem Verzeichnis-Auswahlfeld ausgewählt wurde (das heißt, ein Datei-Auswahlfeld, in dem das webkitdirectory-Attribut gesetzt ist). Dies ist nicht standardisiert und sollte mit Vorsicht verwendet werden.

Oftmals möchten Sie nicht, dass der Benutzer einen beliebigen Dateityp auswählen kann; stattdessen möchten Sie oft, dass er Dateien eines bestimmten Typs oder mehrerer bestimmter Typen auswählt. Wenn Ihr Datei-Input es beispielsweise Benutzern erlaubt, ein Profilbild hochzuladen, möchten Sie wahrscheinlich, dass sie web-kompatible Bildformate wie JPEG oder PNG auswählen.

Akzeptable Dateitypen können mit dem accept-Attribut angegeben werden, das eine durch Kommas getrennte Liste erlaubter Dateierweiterungen oder MIME-Typen annimmt. Ein paar Beispiele:

• accept="image/png" oder accept=".png" — Akzeptiert PNG-Dateien.
• accept="image/png, image/jpeg" oder accept=".png, .jpg, .jpeg" — Akzeptiert PNG- oder JPEG-Dateien.
• accept="image/*" — Akzeptiert jede Datei mit einem image/*-MIME-Typ. (Viele Mobilgeräte ermöglichen es dem Benutzer auch, ein Foto mit der Kamera aufzunehmen, wenn dies verwendet wird.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Akzeptiert alles, was sich wie ein MS Word-Dokument verhält.

Sehen wir uns ein vollständigeres Beispiel an:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies erzeugt eine ähnliche Ausgabe wie das vorherige Beispiel:

Es sieht zwar ähnlich aus, aber wenn Sie versuchen, eine Datei mit diesem Input auszuwählen, werden Sie sehen, dass der Datei-Auswahl-Dialog nur die Dateitypen auswählt, die im accept-Wert angegeben sind (die genaue Benutzeroberfläche unterscheidet sich je nach Browser und Betriebssystem).

Das accept-Attribut validiert nicht die Typen der ausgewählten Dateien; es gibt den Browsern Hinweise, um die Benutzer auf die richtigen Dateitypen hinzuweisen. Es ist dennoch (in den meisten Fällen) möglich, dass Benutzer in der Dateiauswahl eine Option umschalten, die es ermöglicht, diese Einschränkung zu umgehen und beliebige Dateien auszuwählen, und dann falsche Dateitypen zu wählen.

Aus diesem Grund sollten Sie sicherstellen, dass das accept-Attribut durch eine geeignete serverseitige Validierung unterstützt wird.

Das cancel-Event wird ausgelöst, wenn der Benutzer seine Auswahl nicht ändert und die zuvor ausgewählten Dateien erneut auswählt. Das cancel-Event wird auch ausgelöst, wenn der Datei-Auswahl-Dialog per "Abbrechen"-Schaltfläche oder der Escape-Taste geschlossen oder abgebrochen wird.

Zum Beispiel wird der folgende Code eine Nachricht in die Konsole protokollieren, wenn der Benutzer das Popup ohne Auswahl einer Datei schließt:

const elem = document.createElement("input");
elem.type = "file";
elem.addEventListener("cancel", () => {
  console.log("Cancelled.");
});
elem.addEventListener("change", () => {
  if (elem.files.length === 1) {
    console.log("File selected: ", elem.files[0]);
  }
});
elem.click();

1. Sie können den Wert eines Datei-Auswahlfelds nicht von einem Skript aus festlegen — Folgendes hat keine Wirkung:

   js

   const input = document.querySelector("input[type=file]");
   input.value = "foo";
   

2. Wenn eine Datei mit einem <input type="file"> ausgewählt wird, wird der echte Pfad zur Quelldatei aus offensichtlichen Sicherheitsgründen nicht im value-Attribut des Inputs angezeigt. Stattdessen wird der Dateiname angezeigt, mit C:\fakepath\ vorangestellt. Es gibt einige historische Gründe für diese Eigenart, aber sie wird in allen modernen Browsern unterstützt und ist tatsächlich in der Spezifikation definiert.

In diesem Beispiel präsentieren wir einen etwas fortgeschritteneren Datei-Auswahldialog, der die Dateiinformationen in der HTMLInputElement.files-Eigenschaft nutzt und einige clevere Tricks zeigt.

Zuerst schauen wir uns das HTML an:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

html {
  font-family: sans-serif;
}

form {
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

Dies ähnelt dem, was wir zuvor gesehen haben — nichts Besonderes zu kommentieren.

Nun gehen wir Schritt für Schritt durch das JavaScript.

In den ersten Zeilen des Skripts erhalten wir Referenzen auf das Formularelement selbst und auf das <div>-Element mit der Klasse .preview. Anschließend verbergen wir das <input>-Element — wir tun dies, weil Datei-Inputs dazu neigen, unattraktiv, schwer zu stylen und inkonsistent im Design über verschiedene Browser hinweg zu sein. Sie können das input-Element durch Klicken auf sein <label> aktivieren, daher ist es besser, das input visuell zu verbergen und das Label wie eine Schaltfläche zu stylen, damit der Benutzer weiß, dass er damit interagieren soll, wenn er Dateien hochladen möchte.

const input = document.querySelector("input");
const preview = document.querySelector(".preview");

input.style.opacity = 0;

Als Nächstes fügen wir einen Event-Listener zum Input hinzu, um auf Änderungen seines ausgewählten Werts zu hören (in diesem Fall, wenn Dateien ausgewählt werden). Der Event-Listener ruft unsere benutzerdefinierte updateImageDisplay()-Funktion auf.

input.addEventListener("change", updateImageDisplay);

Wann immer die updateImageDisplay()-Funktion aufgerufen wird, führen wir Folgendes durch:

• Wir verwenden eine while-Schleife, um die vorherigen Inhalte des Vorschau-<div> zu leeren.

• Wir nehmen das FileList-Objekt, das die Informationen zu allen ausgewählten Dateien enthält, und speichern es in einer Variablen namens curFiles.

• Wir überprüfen, ob keine Dateien ausgewählt wurden, indem wir überprüfen, ob curFiles.length gleich 0 ist. Wenn ja, drucken wir eine Nachricht in das Vorschau-<div>, die angibt, dass keine Dateien ausgewählt wurden.

• Wenn Dateien ausgewählt wurden, durchlaufen wir jede und drucken Informationen darüber in das Vorschau-<div>. Zu beachtende Dinge:

• Wir verwenden die benutzerdefinierte Funktion validFileType(), um zu überprüfen, ob die Datei vom richtigen Typ ist (z.B. die Bildtypen, die im accept-Attribut angegeben sind).

• Wenn dies der Fall ist, wir:

  • Drucken ihren Namen und ihre Dateigröße in ein Listenelement innerhalb des vorherigen <div> (erhalten von file.name und file.size). Die benutzerdefinierte Funktion returnFileSize() gibt eine schön formatierte Version der Größe in Bytes/KB/MB zurück (standardmäßig gibt der Browser die Größe in absoluten Bytes an).
  • Generieren eine Vorschau-Miniaturansicht des Bildes, indem wir URL.createObjectURL(file) aufrufen. Dann fügen wir das Bild auch in das Listenelement ein, indem wir ein neues <img> erstellen und sein src auf das Thumbnail setzen.

• Wenn der Dateityp ungültig ist, zeigen wir eine Nachricht innerhalb eines Listenelements an, die den Benutzer darüber informiert, dass er einen anderen Dateityp auswählen muss.

function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if (curFiles.length === 0) {
    const para = document.createElement("p");
    para.textContent = "No files currently selected for upload";
    preview.appendChild(para);
  } else {
    const list = document.createElement("ol");
    preview.appendChild(list);

    for (const file of curFiles) {
      const listItem = document.createElement("li");
      const para = document.createElement("p");
      if (validFileType(file)) {
        para.textContent = `File name ${file.name}, file size ${returnFileSize(
          file.size,
        )}.`;
        const image = document.createElement("img");
        image.src = URL.createObjectURL(file);
        image.alt = image.title = file.name;

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}

Die benutzerdefinierte Funktion validFileType() nimmt ein File-Objekt als Parameter und verwendet Array.prototype.includes(), um zu überprüfen, ob ein Wert in fileTypes mit der type-Eigenschaft der Datei übereinstimmt. Wenn eine Übereinstimmung gefunden wird, gibt die Funktion true zurück. Wenn keine Übereinstimmung gefunden wird, gibt sie false zurück.

// https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}

Die Funktion returnFileSize() nimmt eine Zahl (in Bytes, aus der aktuellen size-Eigenschaft der Datei) und wandelt sie in eine schön formatierte Größe in Bytes/KB/MB um.

function returnFileSize(number) {
  if (number < 1e3) {
    return `${number} bytes`;
  } else if (number >= 1e3 && number < 1e6) {
    return `${(number / 1e3).toFixed(1)} KB`;
  }
  return `${(number / 1e6).toFixed(1)} MB`;
}

const button = document.querySelector("form button");
button.addEventListener("click", (e) => {
  e.preventDefault();
  const para = document.createElement("p");
  para.append("Image uploaded!");
  preview.replaceChildren(para);
});

Das Beispiel sieht so aus; probieren Sie es aus:

• Verwendung von Dateien aus Webanwendungen — enthält eine Reihe anderer nützlicher Beispiele im Zusammenhang mit <input type="file"> und der File API.